import React, { useState, useEffect } from 'react';
import { Table, Image, Space, Button, Popconfirm, Tooltip, Switch, Select, Input } from 'antd';
import { getProList, getCategory, updateFlag, searchPro } from '../../api/product';

const { Option } = Select;

function Index() {
  const [proList, setProList] = useState([]);
  const [categoryList, setCategoryList] = useState([]);
  // 设置需要的字段的参数两个 category / search
  const [category, setCategory] = useState('');
  const [search, setSearch] = useState('');

  useEffect(() => {
    // 该项目共有150，测试Table组件的自动分页，写了 200
    getProList({ limitNum: 200 }).then((res) => {
      setProList(res.data.data);
    });
    getCategory().then((res) => {
      // 无需重置分类数据
      setCategoryList(res.data.data);
    });
  }, []);

  const changeRecommendFlag = (proid, text) => {
    updateFlag({ proid, type: 'isrecommend', flag: text === 1 ? false : true }).then(() => {
      getProList({ limitNum: 200 }).then((res) => {
        setProList(res.data.data);
      });
    });
  };

  const changeSeckillFlag = (proid, text) => {
    updateFlag({ proid, type: 'isseckill', flag: text === 1 ? false : true }).then(() => {
      getProList({ limitNum: 200 }).then((res) => {
        setProList(res.data.data);
      });
    });
  };

  const columns = [
    { title: '序号', width: 100, fixed: 'left', render: (text, record, index) => <span>{index + 1}</span> },
    { title: '名称', width: 260, fixed: 'left', dataIndex: 'proname' },
    { title: '分类', width: 100, dataIndex: 'category' },
    { title: '品牌', width: 100, dataIndex: 'brand' },
    { title: '图片', width: 200, dataIndex: 'img1', render: (text) => <Image src={text} width={80} height={80} /> },
    { title: '原价', width: 100, dataIndex: 'originprice' },
    { title: '折扣', width: 100, dataIndex: 'discount' },
    { title: '销量', width: 100, dataIndex: 'sales' },
    { title: '库存', width: 100, dataIndex: 'stock' },
    { title: '上架状态', width: 110, fixed: 'right', dataIndex: 'issale', render: (text) => <Switch checked={text} /> },
    {
      title: '是否推荐',
      width: 110,
      fixed: 'right',
      dataIndex: 'isrecommend',
      render: (text, record) => (
        <Switch
          checked={text}
          onChange={() => {
            changeRecommendFlag(record.proid, text);
          }}
        />
      )
    },
    {
      title: '是否秒杀',
      width: 100,
      fixed: 'right',
      dataIndex: 'isseckill',
      render: (text, record) => (
        <Switch
          checked={text}
          onChange={() => {
            changeSeckillFlag(record.proid, text);
          }}
        />
      )
    },
    {
      title: '操作',
      width: 180,
      fixed: 'right',
      render: (text, record, index) => {
        return (
          <Space>
            <Tooltip title='功能正在开发中'>
              <Button type='dashed'>编辑</Button>
            </Tooltip>
            <Popconfirm title='确定删除吗?' onConfirm={() => {}} okText='确定' cancelText='取消'>
              <Button type='danger'>删除</Button>
            </Popconfirm>
          </Space>
        );
      }
    }
  ];

  // 改变分类
  const changeCategory = (value) => {
    setCategory(value);
  };

  // 改变关键词的数据
  const changeSearch = (e) => {
    setSearch(e.target.value);
  };

  // 搜索
  const searchFn = () => {
    searchPro({
      category,
      search
    }).then((res) => {
      setProList(res.data.data);
    });
  };

  return (
    <div>
      <Select style={{ width: 120 }} value={category} onChange={changeCategory}>
        <Option value=''>全部</Option>
        {categoryList &&
          categoryList.map((item) => {
            return (
              <Option key={item} value={item}>
                {item}
              </Option>
            );
          })}
      </Select>
      <Input style={{ width: 200 }} placeholder='请输入关键词' value={search} onChange={changeSearch}></Input>
      <Button type='primary' onClick={searchFn}>
        搜索
      </Button>
      <Table columns={columns} dataSource={proList} rowKey={(record) => record.proid} scroll={{ x: 1500, y: 740 }}></Table>
    </div>
  );
}

export default Index;
